<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示/隐藏诗词</title>
</head>
<body>
    <!-- 使用 v-html、v-text 及 v-on 指令显示/隐藏诗词 -->
    <div id="app">
        <h1 v-html="title"></h1>
        <p v-text="poem"></p>
        <button v-on:click="togglePoem">显示/隐藏诗词</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        const comApp = createApp({
            data() {
                return {
                    title: "<span style='color: red;'>静夜思</span>",
                    poem: "床前明月光，疑是地上霜。",
                    showPoem: false,
                }
            },
            methods: {
                togglePoem() {
                    this.showPoem = !this.showPoem;
                    if (this.showPoem) {
                        this.poem += "举头望明月，低头思故乡。";
                    } else {
                        this.poem = "床前明月光，疑是地上霜。";
                    }
                },
            },
        }).mount("#app");
    </script>
</body>
</html>